<!--
 * @Description: 
 * @Autor: codeBo
 * @Date: 2025-04-23 11:22:22
 * @LastEditors: lihaibo@shanshu.ai
 * @LastEditTime: 2025-05-06 15:33:47
-->
<script setup>
import { Handle, Position } from '@vue-flow/core'
import { NodeResizer } from '@vue-flow/node-resizer'
import useDeviceFlowStore from '../pinia.ts'
import { useModal } from 'vue-modal-provider'
import DeviceG6Chart from '@/commn/deviceG6Chart/index.vue'

const { show: myDeviceG6Chart } = useModal(DeviceG6Chart)

const flowStore = useDeviceFlowStore()
const isEdit = computed(() => flowStore.isEdit)
const props = defineProps(['node', 'deleteNode'])

const deleteEvent = () => {
  props.deleteNode(props.node)
}
const clickNode = () => {
  if (isEdit.value) {
    return
  }
  // 打开下一个弹窗，关闭当前弹窗
  flowStore.modelRef?.close()
  myDeviceG6Chart({
    caseId: flowStore.caseId,
    deviceCode: props.node.data.deviceCode
  })
}
</script>

<template>
  <div class="rect-node" v-if="node.type === 'resizable'">
    <NodeResizer color="gray" :isVisible="isEdit" :min-width="200" :min-height="100" />
    <el-button v-if="isEdit" link @click="deleteEvent" class="shanshu-btn-hover"
      ><Icon icon="svg-icon:icon-hua-cancel" size="10" color="#8F919E"
    /></el-button>
    <div style="padding: 10px">
      <!-- <el-input v-model="node.data.label" /> -->
    </div>
  </div>
  <div
    v-else
    style="padding: 10px"
    :class="{ 'not-edit': !isEdit, 'dark-theme': dark }"
    class="default-node"
  >
    <div @click="clickNode">
      <p>装置代码：{{ node.data.label }}</p>
      <p>装置名称：{{ node.data.deviceName }}</p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.shanshu-btn-hover {
  position: absolute;
  right: 0px;
  top: 0px;
}
.rect-node {
  height: 100%;
  // background-color: rgba(0, 0, 0, 0.1);
  border: 1px solid #c9d2e5;
}
// ::v-deep(.vue-flow__resize-control.line.top) {
//   border-top-width: 2px;
//   border-color: red !important;
// }
.default-node {
  border: 1px #1d4f91 solid;
  background-color: #fff;
  color: #082050;
}
.dark-theme {
  color: #333;
}
.not-edit {
  cursor: pointer;
}
</style>
